<template>
	<view class="teamBuilding">
		<view class="tabs" v-if="tabs&&tabs.length">
			<scroll-view class="scroll-view" scroll-x="true">
				<block v-for="(item,i) in tabs" :key="i">
					<view class="tab_item">
						<view :class="{'current_tab':currentType==i}" @tap="onChangeTab(i)">
							{{item.name}}
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
		<view class="activity_list">
			<productList :list="list" :noMoreData="noMoreData"></productList>
		</view>
		
	</view>
</template>

<script>
	import productList from "../../../components/productList/productList.vue"
	export default {
		components: {
			productList
		},
		data() {
			return {
				tabs: [],
				currentType: 0,
				page: 1,
				lastPage: 1,
				noMoreData: false,
				list: [],
			};
		},
		onShow() {
			this.getClassyfy()
		},
		onReachBottom() {
			if (this.page < this.lastPage) {
				this.page += 1
				this.getActivities()
			} else {
				this.noMoreData = true
			}
		},
		methods: {
			async getActivities() {
				const res = await this.$api.get('competition/week/list', {
					activity: 2,
					categoryId: this.tabs[this.currentType].id,
					page: this.page,
					// keywords: this.keywords,
					limit: 10,
					type: 0,
				});
				console.log(res, "团建")
				if (res.code == 200) {
					const {
						list,
						totalPage
					} = res.data
					if (this.page == 1) {
						this.list = list || [];
						this.lastPage = totalPage || 1;
					} else {
						this.list.push(...list);
					}
					this.page != 1 && list.length == 0 ? this.noMoreData = true : this.noMoreData = false
				}
			},
			async getClassyfy() {
				// 0=赛事, 1=党建，2=团建，3=研学产品，4=冬夏令营，5=红领巾博物馆 6=托管服务
				const res = await this.$api.get(`team/category/2`, {});
				console.log(res, "11111--")
				if (res.code == 200) {
					this.tabs = res.data
					if(res.data && res.data.length) {
						this.getActivities()
					}
				}
			},
			onChangeTab(i) {
				// this.keywords = ''
				this.currentType = i
				this.page = 1
				this.getActivities()
			},
			// tabsChange(item) {
			// 	this.currentType = item.val
			// },
			activityDetail() {
				uni.navigateTo({
					url: '/pages/activity/activityDetail/activityDetail'
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.teamBuilding {
		.tabs {
			padding: 0 26rpx;
			box-sizing: border-box;
			height: 92rpx;
			overflow: hidden;
			display: flex;
			align-items: center;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			// #ifdef H5
			top: 100rpx;
			//#endif

			z-index: 6;
			background-color: #fff;

			.scroll-view {
				white-space: nowrap;
				width: 100%;

				.tab_item {
					padding: 30rpx 0;
					display: inline-block;

					>view {
						font-size: 26rpx;

					}

					.current_tab {
						font-size: 30rpx;
						font-weight: bold;
						position: relative;
					}

					.current_tab::before {
						height: 8rpx;
						width: 100%;
						background-image: linear-gradient(to right, #3DD8FF, #589AFF);
						position: absolute;
						display: block;
						content: '';
						bottom: 0;
						left: 0;
						// z-index: -1;
					}
				}

				.tab_item:not(:last-child) {
					margin-right: 38rpx;
				}
			}
		}

		.activity_list {
			padding: 120rpx 26rpx 30rpx;
			box-sizing: border-box;
		}
	}
</style>